<template>
  <div class="demo-date-picker">
    <div class="block">
      <el-date-picker
        v-model="selectedDates"
        type="daterange"
        range-separator="To"
        start-placeholder="提车时间"
        end-placeholder="还车时间"
        :disabled-date="disabledDate"
        @change="handleDateRangeChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElDatePicker } from 'element-plus'
import 'element-plus/dist/index.css'

const selectedDates = ref([])
const emit = defineEmits(['update:selectedDates'])

// Define the disabledDate function
const disabledDate = (time) => {
  const now = new Date()
  // Disable dates before today
  return time.getTime() < now.setHours(0, 0, 0, 0)
}

const handleDateRangeChange = (dates) => {
  emit('update:selectedDates', dates)
}
</script>

<style scoped>
.demo-date-picker {
  display: inline-block;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: left;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: inline-block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>

<style scoped>
.demo-date-picker {
  display: inline-block;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: left;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: inline-block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
